<template>
  <div class="home-wrapper">
    <Row :gutter="10">
      <Col v-for="item, index in good" :key="`goods-${index}`" style="margin-bottom: 10px" :xxl="6" :xl="8" :lg="12" :xs="24">
        <Card>
          <div class="flex-start good-info">
            <div class="good-img">
              <img :src="item.img" :alt="item.title">
            </div>
            <div>
              <div>
                <p>{{item.title}}</p>
                <span>{{item.desc}}</span>
              </div>
              <div class="flex-bet good-opt">
                <p class="good-pic">{{item.pice | format}}</p>
                <div>
                  <InputNumber :min="0" :max="99" v-model="item.num" controls-outside @on-change="amount" />
                </div>
              </div>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
    <div class="footer">
      <Button type="primary" @click="copy">复制账号</Button>&nbsp;&nbsp;&nbsp;
      <Button type="primary" @click="goPay" :disabled="!allPic">点击支付</Button>
    </div>
  </div>
</template>

<script>
import { pay, query, callback } from "@/api/alipay";
import mixins from "@/mixins";
export default {
  name: "home",
  mixins: [mixins],
  data() {
    return {
      good: [
        {
          img: 'https://portrait.gitee.com/uploads/avatars/user/3177/9533890_copy-with_1628588586.png!avatar60',
          title: 'psoakr8343@sandbox.com',
          desc: '商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介',
          pice: 1,
          num: 0
        },
        {
          img: 'https://portrait.gitee.com/uploads/avatars/user/3177/9533890_copy-with_1628588586.png!avatar60',
          title: '商品名',
          desc: '商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介',
          pice: 12,
          num: 0
        },
        {
          img: 'https://portrait.gitee.com/uploads/avatars/user/3177/9533890_copy-with_1628588586.png!avatar60',
          title: '商品名',
          desc: '商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介',
          pice: 5.8,
          num: 0
        }
      ],
      allPic: 0
    }
  },
  filters: {
    format:(val)=>{
      return '￥'+(val.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
    }
  },
  mounted() {
    // query().then(res=>{
    //   console.log(res.data)
    // })
    // callback().then(res=>{
    //   console.log(res.data)
    // })
  },
  methods: {
    copy() {
      navigator.clipboard.writeText('psoakr8343@sandbox.com').then(() => {
        this.$Message.success('复制成功');
      });
    },
     goPay() {
      this.allPic && this.modalConfirm("支付宝沙箱测试账号，请勿付款！！", () => {
        pay({
          pirce: this.allPic
        }).then(res=>{
          window.open(res.data)
        })
      })
     },
    amount(e) {
      this.allPic = this.good.reduce((total, item) => {
        return total += item.pice * item.num
      }, 0)
    }
  }
};
</script>

<style lang="less" scoped>
.home-wrapper {
  padding-bottom: 60px;
  .good-info {
    font-size: 18px;
    line-height: 1.6;
    position: relative;
    .good-img {
      width: 30%;
      position: relative;
      &::after {
        content: '';
        display: block;
        padding-bottom: 100%;
      }
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      & + div {
        position: absolute;
        right: 0;
        width: ~'calc(70% - 10px)';
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    p {
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;  
    }
    span {
      font-size: 14px;
      color: #999;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    /deep/ .good-opt {
      .ivu-input-number {
        width: 110px
      }
      .good-pic {
        color: #ff4212;
        font-weight: 600;
        font-size: 20px;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end;
    background-color: #575f6a;
  }
}
</style>